<template>
  <div class="c-w100 c-bg-white" v-if="circleOwner != null">
    <div class="c-flex-row c-aligni-center c-w100 c-hh60 c-ph24 c-fs22 c-fc-xblack theme-bg-10">
      <span class="c-flex-1 c-text-ellipsis1 c-fs22 theme-fc">{{circleOwner.companyName}}</span>邀请您成为圈主
    </div>
    <div class="c-ph24">
      <!-- top -->
      <div class="c-pt30 c-pb32 c-flex-row  c-bd-b1">
        <div class="c-ww180 c-hh180 c-br20">
          <img
            v-lazy="$addXossFilter(circleOwner.avatar || require('@/assets/defult270.png'))"
            alt=""
            class="c-br20 c-w100 c-h"
          >
        </div>
        <div class="c-pl20 c-flex-column c-flex-grow1 c-w0">
          <p class="c-fs32 c-text-ellipsis2 c-fc-xblack">{{circleOwner.name}}</p>
          <div class="c-fs20 c-fc-xblack c-mt30 c-flex-row c-justify-sb c-aligni-center">
            <div>
              <span>{{circleOwner.memberCount}}人加入</span> |
              <span>{{circleOwner.feedcount}}条动态</span>
            </div>
          </div>
        </div>
      </div>
      <div class="c-pt30 c-pb18">
        <p class="c-fs26 c-fc-xblack">圈主简介</p>
      </div>
      <div class="c-ph22 c-pv22 c-bd1-mgray c-br8 c-bg-white">
        <textarea
          rows="5"
          class="c-bg-white c-fc-xblack c-w100 c-bd0 c-fs24"
          :maxlength="200"
          :placeholder="'请填写您的简介，让圈子里的用户更加了解你（提交后可能会被管理员重新编辑）'"
          v-model="questionDesc"
          @blur="blurTextarea"
        ></textarea>
        <div class="c-fs22 c-fc-sgray c-textAlign-r"> {{questionDesc.length}}/200 </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="c-pf c-p-b0 c-w100 c-maxw640 c-hh124 c-bg-white c-ph24 c-flex-row c-justify-center c-aligni-center">
      <div class="c-fs28 c-fc-white theme-bg-gradient c-w100 c-hh64 c-br30 c-flex-row c-justify-center c-aligni-center" @click.stop="beCircleOwner()">成为圈主</div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
export default {
  name: "CircleOwner",
  data() {
    return {
      theme: localStorage.getItem("colorName") || 'mb5_default',
      questionDesc: "",
      crircleId: "",
      circleOwner: null,
      isClick: false,
    }
  },
  activated() {
    setDocumentTitle("圈子资料");
    this.circleId = this.$route.query.circleId || "";
    this.circleOwner = null;
    this.isClick = false;
    this.toBeCircleOwner();
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    // 接受成为圈主
    beCircleOwner() {
      let _this = this;
      if (this.isClick) {
        return true;
      }
      this.isClick = true;
      utilJs.postMethod(`${global.apiurl}circle/beCircleOwner`, {
        circleId: this.circleId,
        intro: this.questionDesc
      }, res => {
        this.$showCjToast({
          text: "加入成功",
          type: "success",
        }).then(() => {
          _this.$routerGo(_this, "push", {
              path: "/homePage/circle/circleFeed",
              query: {
                id: _this.circleId
              }
            })
        });
      }, failRes => {
        this.isClick = false;
      })
    },
    // 邀请成为圈主信息
    toBeCircleOwner() {
      let _this = this;
      utilJs.getMethod(`${global.apiurl}circle/toBeCircleOwner/${this.circleId}`, res => {
        if (res.inviteType == 1) {
          this.$routerGo(this, "replace", {
            path: "/homePage/circle/circleFeed",
            query: {
              id: this.circleId
            }
          });
        } else if (res.isBlackList) {
          this.$showCjToast({
            text: '暂无圈子权限，请联系圈子管理员',
            type: "warn",
          }).then(() => {
            _this.$routerGo(_this, "replace", {
              path: "/homePage/circle/circleList"
            });
          })
        } else {
          this.circleOwner = res;
        }
      }, failRes => { })
    },
    blurTextarea(e) {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = 0;
        });
      }
    },
    //分享
    wechatShare: function () {
      let title = '圈子资料';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc") || '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, "", shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = '圈子资料';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc") || '点击查看详情';
      utilJs.appShareTrue(title, "", shareUrl, shareDesc);
    }
  }
}
</script>

<style lang="less" scoped>
textarea {
  resize: none;
  line-height: 0.85rem;
}
.c-hh124 {
  height: 3.1rem;
}
</style>